<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>题目编辑</title>
    <c:import url="/layout/_imports.jsp"></c:import>
    <style>
        .page_identifier {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .page_item {
            text-decoration: none;
            color: black;
            width: 50px;
            height: 50px;
            border: 1px solid grey;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            padding: unset;
            border-radius: 5px;
            margin: 0 5px;

        }

        .page_item:hover {
            border: 1px solid #4100d5;
            color: #fff;
            background: #2f7ef2;
        }

        .page_item.active {
            background: greenyellow;
            width: 50px;
            height: 50px;
            border: 1px solid grey;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
        }

        .page_info {
            text-align: center;
            line-height: 50px;
            font-weight: lighter;
        }
        .t_content {
            width: 25%;
            text-align: left;
        }
    </style>
</head>
<body>
<c:import url="/layout/_nav.jsp"></c:import>
<div class="container">
    <h2>题目编辑</h2>
    <h2>当前试卷：${paper.title}</h2>
    <form action="/paper/update" method="post">
        <input type="hidden" name="id" value="${paper.id}">
        <table class="table" style="text-align: center">
            <thead class="thead-dark">
            <tr>
                <th scope="col">序号</th>
                <th scope="col" class="t_content">题目</th>
                <th scope="col" class="t_content">内容</th>
                <th scope="col">答案</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>

            <c:forEach items="${itemes}" var="i" varStatus="item">
                <tr>
                    <th scope="row">${item.index + 1}</th>
                    <td class="t_content">${i.title}</td>
                    <td class="t_content">${i.content}</td>
                    <td>${i.answer}</td>
                    <td>
                        <form action="/paper/deleteItem" method="post">
                            <input type="hidden" name="paperId" value="${paper.id}"/>
                            <input type="hidden" name="itemId" value="${i.id}"/>
                            <a href="/paper/item/edit/${i.id}?paperId=${paper.id}&page=${page}&size=${size}" class="btn btn-primary">编辑</a>
                            <button type="submit" class="btn btn-danger"
                                    onclick="return confirm('确认删除？')">删除
                            </button>
                        </form>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <div class="page_identifier">
            <c:if test="${page - 1 > 0}">
                <a class="page_previous page_item" href="/paper/itemsManage?id=${paper.id}&page=${page - 1}&size=${size}">上一页</a>
            </c:if>
            <c:if test="${page - 5 > 0}">
                <a class="page_previous page_item" href="/paper/itemsManage?id=${paper.id}&page=1&size=${size}">1</a>
                <a class="page_previous page_item" href="/paper/itemsManage?id=${paper.id}&page=${page - 6}&size=${size}">...</a>
            </c:if>
            <c:forEach var="i"
                       begin="${(page - 5 < 0 ? 0 : page - 5) + 1}"
                       end="${(page + 5 > total ? total : page + 5)}">
                <a class="page_count_1 page_item ${page == i ? "btn btn-primary" : ""}" href="/paper/itemsManage?id=${paper.id}&page=${i}&size=${size}">${i}</a>
            </c:forEach>
            <c:if test="${page + 5 < total}">
                <a class="page_previous page_item" href="/paper/itemsManage?id=${paper.id}&page=${page + 6}&size=${size}">...</a>
                <a class="page_previous page_item" href="/paper/itemsManage?id=${paper.id}&page=${total}&size=${size}">${total}</a>
            </c:if>
            <c:if test="${page + 1 <= total}">
                <a class="page_next page_item" href="/paper/itemsManage?id=${paper.id}&page=${page + 1}&size=${size}">下一页</a>
            </c:if>

        </div>
        <div class="page_info">页面${page}/${total},共有${count}条数据</div>
        <div id="page_select">
            <form action="/paper/itemsManage" method="get" class="page_select">
                <input type="hidden" name="id" value="${paper.id}">
                <select class="form-select" aria-label="Default select example" name="size">
                    <option selected>选择每页显示的条数</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </form>
        </div>
        <c:if test="${not empty errMsg}">
            <div class="alert alert-danger">${errMsg}</div>
        </c:if>

        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/paper/manage" class="btn btn-secondary">返回列表</a>
    </form>
</div>
<script>
    $(".form-select").on("change", function () {
        $(".page_select").submit();
    })
</script>
</body>
</html>
